<template>
    <div class="">
        <el-dialog :visible.sync="dialogVisible" width="583px" :append-to-body="true" class="sigin">
            <div class="qiandao_bj">
                <h2>{{ getdate() }}</h2>
                <div class="qiandao_interface">
                    <div class="flex-hbvc" style="margin-top: 30px">
                        <p>
                            累计签到
                            <span>{{ this.days_num || 0 }}天</span>
                        </p>
                        <el-button v-if="this.titleClass === 0" size="mini" round @click="Signins()" :disabled="disabled">立即签到</el-button>
                        <el-button v-else size="mini" round :disabled="disabled" style="color: #ffa031; background: rgba(255, 255, 255, 0.15); border-color: #ffa031">已签到</el-button>
                    </div>
                </div>
                <div class="qiandao_date">
                    <ul class="flex-w">
                        <li :class="item.i ? 'active' : ''" v-for="(item, id) in days" :key="id">
                            <svg-icon style="font-size: 32px; margin: 9px 12px 0" icon-file-name="jifen" />
                            <p v-show="item.i === 1 ? false : true">第{{ item.id }}天</p>
                            <p v-show="item.i === 1 ? true : false">+{{ item.memSiginSocer }}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="签到" :visible.sync="wechatDialogVisible" width="330px" :modal-append-to-body="true" :append-to-body="true" center @close="wxbd()" class="wx">
            <p class="anquan">为了给你提供更好的服务</p>
            <h4 class="mima">请微信扫一扫验证二维码</h4>
            <img style="width: 200px; margin-left: 40px; min-height: 200px" :src="image_Src" alt="" />
            <el-form>
                <el-form-item style="text-align: center">
                    <el-button type="primary" @click="wechatDialogVisible = false" class="button_btn">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { selectSginin, SignS, SignState } from '@/api/url'
export default {
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  created () {
  },
  data () {
    return {
      dialogVisible: false,
      pageNum: 1,
      pageSize: 10,
      days: [{ id: 1, i: 0 }, { id: 2, i: 0 }, { id: 3, i: 0 }, { id: 4, i: 0 }, { id: 5, i: 0 }, { id: 6, i: 0 }, { id: 7, i: 0 }, { id: 8, i: 0 }, { id: 9, i: 0 }, { id: 10, i: 0 }, { id: 11, i: 0 }, { id: 12, i: 0 }, { id: 13, i: 0 }, { id: 14, i: 0 }],
      list: [], // 签到数组
      days_num: '', // 已经签到多少天
      today: '', // 当日是否签到 0.否 1.是
      memSiginSocer: '', // 积分数量
      day_num: '', // 当前是第几天
      sigCreatTime: '', // 获取当前时间
      titleClass: 0,
      disabled: false,
      wechatDialogVisible: false,// 签到二维码弹窗
      image_Src: '',// 签到二维码路径
      scene_Str: '',// 签到二维码标识
      timer: null,// 签到二维码标识
    }
  },
  mounted () {
    this.$EventBus.$on('openSignin', (data) => { this.openSignin() })
  },
  methods: {
    // 打开签到
    openSignin () {
      this.selectSginin().then(() => { this.dialogVisible = true })
    },
    // 立即签到
    async Signins () {
      try {
        const res = await SignS()
        if (res.data.code === 200 && res.data.switch === true) {
          this.wechatDialogVisible = true
          this.image_Src = 'data:image/gif;base64,' + res.data.data.image_src
          this.scene_Str = res.data.data.scene_str
          this.timer = setInterval(() => {
            this.SignStateS()
          }, 1000)
        } else if (res.data.code === 200 && res.data.switch === false) {
          // console.log(123456);
          this.$message({ message: '今日已签到完成！', type: 'success', center: true })
          this.selectSginin()
          this.titleClass = 1
          this.disabled = true// 禁用
          this.$EventBus.$emit('callTopGetInfos', 1)//!去调用获取用户信息
        } else if (res.data.code === 500) {
          this.$message({ message: res.data.msg, type: 'warning', center: true })
          // if (res.data.data === -1) {
          //   this.$message({ message: res.data.msg, type: 'warning', center: true })
          // } else if (res.data.data === -2) {
          //   this.$message({ message: res.data.msg, type: 'warning', center: true })
          // } else if (res.data.data === -3) {
          //   this.$message({ message: res.data.msg, type: 'warning', center: true })
          // } else if (res.data.data === -4) {
          //   this.$message({ message: res.data.msg, type: 'warning', center: true })
          // }
        }
      } catch (error) {
      }
    },
    // 获取签到二维码状态
    async SignStateS () {
      const res = await SignState({ sceneStr: this.scene_Str })
      if (res.data.code === 200) {
        clearInterval(this.timer)
        this.$message({ message: '今日已签到完成！', type: 'success', center: true })
        this.selectSginin()
        this.wechatDialogVisible = false
        this.titleClass = 1
        this.$EventBus.$emit('callTopGetInfos', 1)//!去调用获取用户信息
        this.disabled = true// 禁用
      } else if (res.data.code === 500) {
        if (res.data.error === -1) {
          clearInterval(this.timer)
          this.wechatDialogVisible = false
          this.$message({ message: res.data.msg, type: 'warning', center: true })
        } else if (res.data.error === -2) {
          clearInterval(this.timer)
          this.wechatDialogVisible = false
          this.$message({ message: res.data.msg, type: 'warning', center: true })
        } else if (res.data.error === -3) {
          clearInterval(this.timer)
          this.wechatDialogVisible = false
          this.$message({ message: res.data.msg, type: 'warning', center: true })
        } else if (res.data.error === -4) {
          clearInterval(this.timer)
          this.wechatDialogVisible = false
          this.$message({ message: res.data.msg, type: 'warning', center: true })
        } else if (res.data.error === -5) {
          clearInterval(this.timer)
          this.wechatDialogVisible = false
          this.$message({ message: res.data.msg, type: 'warning', center: true })
        } else if (res.data.error === -6) {
          clearInterval(this.timer)
          this.wechatDialogVisible = false
          this.$message({ message: res.data.msg, type: 'warning', center: true })
        } else if (res.data.error === -7) {
          clearInterval(this.timer)
          this.wechatDialogVisible = false
          this.$message({ message: res.data.msg, type: 'warning', center: true })
        } else if (res.data.error === -8) {
          clearInterval(this.timer)
          this.wechatDialogVisible = false
          this.$message({ message: res.data.msg, type: 'warning', center: true })
        }
      }
    },
    // 查询用户连续签到记录
    async selectSginin () {
      try {
        const res = await selectSginin()
        this.list = res.data.data
        if (res.data.today === true) {
          this.disabled = true// 禁用
          this.titleClass = 1
        } else {
          this.disabled = false
          this.titleClass = 0
        }
        // if (this.list.length > 14 && this.list.length !== 0) {
        //   this.disabled = true// 禁用
        //   return
        // }
        for (let i = 0; i < this.days.length; i++) {
          this.days[i].i = 0
          for (let j = 0; j < this.list.length; j++) {
            if (this.days[i].id === this.list[j].coherentDay) {
              this.days[i].i = 1
              this.days[i].memSiginSocer = this.list[j].memSiginSocer
            }

          }
        }
        this.days_num = res.data.data.map(item => item.coherentDay)
        this.days_num = this.days_num[this.days_num.length - 1]
      } catch (error) {
        // console.log(error);
      }
    },
    // 关闭微信绑定弹窗时清除扫码状态(轮询)的定时器
    wxbd () {
      clearInterval(this.timer)
    },
    // 获取用户签到积分
    // async getSignins () {
    //   try {
    //     const { ...data } = await getSignins({ pageNum: this.pageNum, pageSize: this.pageSize })
    //     // this.days_num = data.data.total
    //     this.list = data.data.rows
    //     console.log(this.list)
    //     // 计算积分总和
    //     // this.memSiginSocer = this.list.reduce((prev, next) => {
    //     //   return prev + next.memSiginSocer
    //     // }, 0)
    //   } catch (err) {
    //     console.log(err)
    //   }
    // },
    // 获取年月日
    getdate () {
      const date = new Date()
      const year = date.getFullYear()
      let month = date.getMonth() + 1

      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      const currentdate = year + ' 年 ' + month + ' 月 '
      return currentdate
    }
  },
  computed: { ...mapState(['user']) },
  beforeDestroy () {//移除监听事件
    this.$EventBus.$off("openSignin")
  },
  watch: {
    // 这里监听dialogShow对象的变化
    dialogShow: {
      deep: true,
      handler (val) {
        if (val) {
          this.dialogVisible = true
        }
      }
    }
  },
  filters: {},
  components: {}
}
</script>

<style scoped lang='less'>
.wx {
    /deep/.el-button--primary {
        width: 260px;
        margin-top: 16px;
    }
    /deep/.el-dialog__body {
        padding: 72px 25px 15px !important;
        border-top: 0px;
    }
}
.sigin {
    /deep/.el-dialog__header {
        padding: 0 !important;
    }
    /deep/.el-dialog__body {
        padding: 0 !important;
        height: 100% !important;
    }
}
.anquan {
    font-size: 11px;
    font-family: '微软雅黑';
    font-weight: 400;
    color: #979797 !important;
    letter-spacing: 0.33px;
    margin-top: -30px;
}
.mima {
    font-size: 14px;
    font-family: '微软雅黑';
    font-weight: 500;
    color: #606266;
    letter-spacing: 0.42px;
    margin-bottom: 23px;
}

.qiandao_bj {
    padding: 0px 50px 0;
    height: 378px;
    background: url(@/assets/dialogImg/qiandao_bj.png) no-repeat -1px 0;
    h2 {
        position: relative;
        top: 15px;
        font-size: 24px;
        font-family: '微软雅黑';
        font-weight: normal;
        text-align: left;
        color: #fff2d5;
        letter-spacing: 0.24px;
        text-align: center;
    }
    .qiandao_interface {
        padding-top: 35px;
        p {
            font-size: 17px;
            font-family: '微软雅黑';
            color: #fff2d5;
            letter-spacing: 0.14px;
            span {
                color: #ffb331;
            }
        }
        .el-button.is-round {
            font-size: 14px;
            width: 94px;
            height: 27px;
            padding: 0;
            background: linear-gradient(180deg, #cdad5f, #f2ead1);
            color: #212121;
            letter-spacing: 0.14px;
            border: 0px solid #db9a17;
            font-family: '微软雅黑';
            margin-right: 20px;
        }
        .el-button:focus,
        .el-button:hover {
            background: linear-gradient(180deg, #b19248, #d8cfb4);
            border: 0px solid #ffa031;
        }
    }
    .qiandao_date {
        li {
            margin-top: 20px;
            margin-right: 10px;
            width: 57px;
            height: 79px;
            background: rgba(243, 243, 243, 0.1);
            border: 1px solid #48494d;
            border-radius: 2px;
            &:focus {
                background: rgba(255, 255, 255, 0.15);
                border: 1px solid #fff2d5;
            }
            &:hover {
                background: rgba(255, 255, 255, 0.15);
                border: 1px solid #fff2d5;
            }
            &:nth-child(7) {
                margin-right: 0px;
            }
            p {
                margin-top: 7px;
                transform: scale(0.8);
                font-family: '微软雅黑';
                color: #ae8d6a;
                letter-spacing: 0.1px;
                text-align: center;
            }
        }
    }
}
.active {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid #fff2d5 !important;
    .svg-icon {
        opacity: 0.8;
    }
}
</style>
